<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基金设置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="layui/tableSelect.js"></script>
</head>
<body>
<!--表格上方的 工具条-->
<script type="text/html" id="fundToolBar">
    <button class="layui-btn layui-btn-sm" lay-event="insert"><i
            class="layui-icon">&#xe654;</i>新增</button>
    <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>

    <div style="width:690px;float:right;height:30px;">
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">基金名称</label>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input  class="layui-input" autocomplete="off" placeholder="请输入基金名称" name="fundName" id="fundName">
        </div>
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label layui-bg-gray" style="width: 110px;text-align: center">基金类型</label>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <select name="fundType" id="fundType">
                <option value="0" placeholder="请选择"></option>
                <option value="2">封闭式</option>
                <option value="1">开放式</option>
            </select>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i
                    class="layui-icon layui-icon-search"></i>
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        var $  = layui.$;//jquery
        var layer= layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date'
        });

        laydate.render({
            elem: '#date2'
        });
        //查询
        table.render({
            elem: '#fundSetting',
            url:'/selectFundSettingMap', //数据接口
            height: 'full-55'
            , minLength: 80,
            page: true, //开启分页
            toolbar: '#fundToolBar',
            limits:[2,4,6,8],
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'fundId', title: '基金ID', sort: true, fixed: 'left'}
                ,{field: 'fundName', title: '基金名称'}
                ,{field: 'custodian', title: '基金管理公司'}
                ,{field: 'trustee', title: '基金托管银行'}
                ,{field: 'cashId', title: '账号Id'}
                ,{field: 'fundType', title: '基金类型',templet: function(item){
                        if(item.fundType=='2') {return '封闭式';
                        } else if(item.fundType=='1'){ return '开放式';
                        }
                    }},
                ,{fixed: 'right', align:'center', toolbar: '#barDemo',width:200}//编辑删除的按钮
            ]]
        });
        // //给工具栏绑定事件
        table.on('toolbar(fundSetting)',function (obj) {
            //根据事件对象 来判定点击的是哪一个案例
            if(obj.event=='insert'){
                // alert('增加事件触发');
                //iframe层
                layer.open({
                    type: 1,
                    title: '添加基金信息',
                    closeBtn: 1,
                    move:false,
                    area : [ '60%',
                        '450px' ],
                    content:$("#addContent")
                });
            }else if(obj.event=='deleteAll'){
                alert('删除事件触发');
            }else if(obj.event=='search'){
                // alert('根据条件查询')
                var fundName=$("#fundName").val();
                var fundType=$("#fundType").val();
                //表格的重新加载事件
                table.reload('fundSetting', {
                    method: 'post'
                    , where: {
                        'fundName': fundName,
                        'fundType': fundType,
                    }
                    , page: {
                        curr: 1
                    }
                });
                $("#fundName").val(fundName);
                $("#fundType").val(fundType);
            }
        });
        //给最右边的列 添加事件
        table.on('tool(fundSetting)',function (obj) {
            switch (obj.event) {
                case "edit":
                    //得到选中行的数据
                    var data=obj.data;
                    //JSON.stringify(data)  拼接成JSON格式的字符串
                    var bookObj=$.parseJSON(JSON.stringify(data));
                    //弹出一个修改的窗口
                    form.val("editform",bookObj);
                    layer.open({
                        type:1, //iframe 内嵌窗口
                        title: '修改基金设置信息',
                        area:['60%','450px'],
                        content: $("#editContent")
                    });
                    break;
                case "del":
                    // alert("这是删除的操作");
                    // alert("选中的行：" + obj.data.fundId);
                    layer.confirm('您确定要删除吗?',function (index) {
                        layer.close(index);
                        //发送请求到服务器执行删除操作
                        $.post("deleteFundSetting/" + obj.data.fundId,
                            function () {
                                //回调函数，刷新表格数据
                                table.reload('fundSetting');
                            });
                    });
                    break;
            }
        });
        //给增加的form绑定提交事件
        form.on('submit(addsubmit)',function () {
            // alert("新增表单提交");
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData= form.val("addform");
            // alert('formData=' + formData);
            $.post(
                "insertFundSetting",
                formData,
                function(msg) {
                    //重新刷新表格
                    //给予提示信息，增加成功
                    // alert(msg);
                    if(msg==0){
                        alert('增加失败');
                    }else {
                        // alert('增加成功')
                        table.reload('fundSetting');
                        layer.closeAll();
                        // layer.msg('添加成功',{
                        //     title : '提示',
                        //     area : [ '200px',
                        //         '140px' ],
                        //     time : 0,
                        //     btn : [ '知道了' ]
                        // });
                    }
                });
            $("#addform")[0].reset();
            return false;
        });
        //给修改的form绑定提交事件
        form.on('submit(editform)',function () {
            //发送ajax请求到 服务器，
            //得到表单的所有数据
            var formData= form.val("editform");
            // alert('formData=' + formData);
            $.post(
                "updateFundSetting",
                formData,
                function(msg) {
                    //重新刷新表格
                    //给予提示信息，修改成功
                    // alert(msg);
                    if(msg==0){
                        alert('修改失败');
                    }else {
                        alert('修改成功');
                    }
                });

        });
    });
    //下拉表格
    layui.use(['table', 'form', 'tableSelect'], function () {
        var $ = layui.jquery,
            tableSelect = layui.tableSelect;
        //新增托管人下拉表格
        tableSelect.render({
            elem: '#trustee',
            checkedKey: 'trustee',
            table: {
                url: 'selectFundSettingMap',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        , {field: 'trustee', title: '托管银行'}
                        , {field: 'trusteeCostRate', title: '托管费率', sort: true}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.trustee)
                    $("#hiddenFundName").val(item.trustee)
                });
                elem.val(NEWJSON.join(","))
            }
        });
        // 新增管理费率
        tableSelect.render({
            elem: '#custodian',
            checkedKey: 'custodian',
            table: {
                url: 'selectFundSettingMap',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        // {field: 'fundId', title: '基金代码', sort: true, fixed: 'left'},
                        ,{field: 'custodian', title: '管理人名称'}
                        ,{field: 'custodianCostRate', title: '管理费率'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.custodian)
                    $("#hiddenCustodian").val(item.custodian)
                });
                elem.val(NEWJSON.join(","))
            }
        });
        // 新增账号名称
        tableSelect.render({
            elem: '#cashId',
            checkedKey: 'cashId',
            table: {
                url: 'selectCash',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        ,{field: 'cashId', title: '账号Id'}
                        ,{field: 'accountName', title: '账号名称'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.accountName)
                    $("#hiddenCashId").val(item.cashId)
                });
                elem.val(NEWJSON.join(","))
            }
        });
        //修改托管人下拉表格
        tableSelect.render({
            elem: '#trustee2',
            checkedKey: 'trustee',
            table: {
                url: 'selectFundSettingMap',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        // {field: 'fundId', title: '基金Id', sort: true, fixed: 'left'}
                        , {field: 'trustee', title: '托管银行'}
                        , {field: 'trusteeCostRate', title: '托管费率', sort: true}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.trustee)
                    $("#hiddenFundName2").val(item.custodian)
                });
                elem.val(NEWJSON.join(","))
            }
        });
        // 修改管理费率
        tableSelect.render({
            elem: '#custodian2',
            checkedKey: 'custodian',
            table: {
                url: 'selectFundSettingMap',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        // {field: 'fundId', title: '基金dm', sort: true, fixed: 'left'},
                        ,{field: 'custodian', title: '管理人名称'}
                        ,{field: 'custodianCostRate', title: '管理费率'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.custodian)
                    $("#hiddenCustodian2").val(item.custodian)
                });
                elem.val(NEWJSON.join(","))
            }
        });
        // 修改账号Id
        tableSelect.render({
            elem: '#cashId2',
            checkedKey: 'cashId',
            table: {
                url: 'selectCash',
                cols: [
                    [
                        {type: 'radio', fixed: 'left'},
                        ,{field: 'cashId', title: '账号Id'}
                        ,{field: 'accountName', title: '账号名称'}
                    ]]
            },
            done: function (elem, data) {
                var NEWJSON = [];
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.accountName)
                    $("#hiddenCashId2").val(item.cashId)
                });
                elem.val(NEWJSON.join(","))
            }
        });
    });
</script>
<!--表格-->
<table id="fundSetting" lay-filter="fundSetting"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i
            class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

<!--增加的div内容-->
<div id="addContent"
     style="display: none; height: 100%;width: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金ID</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金ID" class="layui-input" name="fundId">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金名称</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="fundName"
                       autocomplete="off" placeholder="请输入基金名称" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金类型</label>
            <div class="layui-input-inline">
                <select name="fundType" >
                    <option placeholder="请选择"></option>
                    <option value="2">封闭式</option>
                    <option value="1">开放式</option>
                </select>
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金托管人</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="trustee" id="trustee"
                       autocomplete="off" placeholder="请输入基金托管人" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
                <input type="hidden" name="trustee" id="hiddenFundName">
            </div>

        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金规模</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金规模" class="layui-input" name="fundScale">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金管理人</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="custodian" id="custodian"
                       autocomplete="off" placeholder="请输入基金管理人" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
                <input type="hidden" name="custodian" id="hiddenCustodian">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金初期净值</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金初期净值" class="layui-input" name="fundNetWorth">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">托管人费用率</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" oninput="if(value.length>4)value=value.slice(0,4)" name="trusteeCostRate"
                       autocomplete="off" placeholder="托管人费用率" class="layui-input" style="width:120px;">
                <div style="margin-top: -27px;margin-left: 125px;"><a style="font-size:18px;">%</a></div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">创立时间</label>
            <div class="layui-input-inline">
                <input type="text" id="date" lay-verify="required"
                       autocomplete="off" placeholder="请输入创立时间" class="layui-input" name="foundTime">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">管理人费用率</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" oninput="if(value.length>4)value=value.slice(0,4)" name="custodianCostRate"
                       autocomplete="off" placeholder="管理人费用率" class="layui-input" style="width:120px;">
                <div style="margin-top: -27px;margin-left: 125px;"><a style="font-size:18px;">%</a></div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">账号名称</label>
            <div class="layui-input-inline">
                <input type="text"  lay-verify="required" name="cashId" id="cashId"
                       autocomplete="off" placeholder="请输入账号名称" class="layui-input" >
                <input type="hidden" name="cashId" id="hiddenCashId"></div>
        </div>
        <div class="layui-form-item" style="position: absolute;left: 20%; bottom: 5px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addsubmit"><i class="layui-icon">&#x1005;</i>添加</button>
                <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
    </form>
</div>

<!--修改的div内容-->
<div id="editContent"
     style="display: none; height:100%; width: 100%; text-align: center;">
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金ID</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" disabled
                       autocomplete="off" placeholder="请输入基金ID" class="layui-input" name="fundId">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金名称</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="fundName"
                       autocomplete="off" placeholder="请输入基金名称" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金类型</label>
            <div class="layui-input-inline">
                <select name="fundType" >
                    <option placeholder="请选择"></option>
                    <option value="2">封闭式</option>
                    <option value="1">开放式</option>
                </select>
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金托管人</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="trustee" id="trustee2"
                       autocomplete="off" placeholder="请输入基金托管人" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
                <input type="hidden" name="custodian" id="hiddenFundName2">
            </div>

        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金规模</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金规模" class="layui-input" name="fundScale">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">基金管理人</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="custodian" id="custodian2"
                       autocomplete="off" placeholder="请输入基金管理人" class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
                <input type="hidden" name="custodian" id="hiddenCustodian2">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">基金初期净值</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required"
                       autocomplete="off" placeholder="请输入基金初期净值" class="layui-input" name="fundNetWorth">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">托管人费用率</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" step="0.00001" name="trusteeCostRate"
                       autocomplete="off" placeholder="请输入托管人费用率" class="layui-input" style="width:120px;">
                <div style="margin-top: -27px;margin-left: 125px;"><a style="font-size:18px;">%</a></div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 35px;">创立时间</label>
            <div class="layui-input-inline">
                <input type="text" id="date2" lay-verify="required" name="foundTime"
                       autocomplete="off" placeholder="请输入创立时间" class="layui-input"
                >
            </div>
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 50px">管理人费用率</label>
            <div class="layui-input-inline">
                <input type="number" lay-verify="required" step="0.00001" style="width:120px;"
                       autocomplete="off" placeholder="请输入管理人费用率" class="layui-input" name="custodianCostRate">
                <div style="margin-top: -27px;margin-left: 125px;"><a style="font-size:18px;">%</a></div>

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 35px;">账号名称</label>
            <div class="layui-input-inline">
                <input type="text"  lay-verify="required" name="cashId" id="cashId2"
                       autocomplete="off" placeholder="请输入账号名称" class="layui-input" >
                <input type="hidden" name="cashId" id="hiddenCashId2"></div>
        </div>
        <div class="layui-form-item" style="position: absolute;left: 28%; bottom: 5px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editsubmit"><i class="layui-icon">&#x1005;</i>修改</button>
                <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>